<template>
	<view class="component">
		<view class="title">
			<view class="label">在线工地 <text style="font-size: 26rpx;">({{ dataSource.length || 0 }})</text></view>
			<view class="more">
				<!-- <uni-icons type="forward" size="20"></uni-icons> -->
			</view>
		</view>
		<view class="content">
			<view class="video-item" v-for="(item, index) of dataSource" :key="index">
				<view class="watch">
					<view class="image-w">
						<image src="../../../static/images/ysmDesignerShop/icon-3.png" mode="widthFix"></image>
					</view>
					<text>{{ item.viewed_num }}</text>
				</view>
				<view class="poster" v-if="item.isAutoPlay" @click="handleClickVideo(index)">
					<image :src="item.video_img" mode="aspectFill"></image>
					<image class="icon-play play-bg" src="../../../static/images/ysmMall/play-1.png" mode="widthFix">
					</image>
					<image class="icon-play play-triangle" src="../../../static/images/ysmMall/play-2.png"
						mode="widthFix">
					</image>
				</view>
				<view class="poster" v-else @click="handleClickVideo(index)">
					<video id="myVideo" class="video" :src="item.video" enable-danmu danmu-btn controls
						:poster-for-crawler="item.video" :title="item.title" :autoplay="item.isAutoPlay"></video>
				</view>
				<view class="info" @click="handleShowInfo(index)">
					<view class="left">日期: {{ item.createtime }}</view>
					<view class="right">
						<view class="address">地址: {{ item.addr }} </view>
						<view class="image-wrap">
							<image v-if="activeIndex === index" src="../../../static/images/siteLive/bottom.png"
								style="width:100%;">
							</image>
							<image v-else src="../../../static/images/siteLive/bottom.png" style="width:100%;"
								class="rotate-image"></image>
						</view>
					</view>
				</view>
				<view class="basic-wrap" v-show="activeIndex === index"> 
					<view class="basic-info-con">
						<view class="title">基本信息</view>
						<!-- <view class="item">业主：{{ item.owner }}</view> -->
						<view class="item">
							<view>业主：{{ item.owner }}</view>
							<view>项目经理：{{ item.manager }}</view>
						</view>
						<view class="item">
							<view>图纸面积：{{ item.area }}</view>
							<view>设计取费：{{ item.work_salary }}</view>
						</view>
						<view class="item">
							<view>工程造价：{{ item.total_cost }}</view>
							<view>设计风格：{{ item.style }}</view>
						</view>
						<!-- <view class="item"> -->
						<!-- <view>设计师：{{ item.user.username }}</view> -->
						<!-- </view> -->
					</view>
				</view> 
			</view>
			<StEmpty v-if="isEmpty">暂无在线工地</StEmpty>
		</view>
	</view>
</template>
<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	export default {
		components: {
			StEmpty
		},
		props: {
			dataSource: {
				type: Array,
				default: () => []
			},
			isEmpty: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeIndex: -1,
				//dataSourceList: this.dataSource ,
			}
		},
		mounted() {

			//this.dataSourceList = dataSourceList;
		},
		methods: {
			handleShowInfo(index) {
				this.activeIndex === index ? this.activeIndex = -1 : this.activeIndex = index;
			},
			goSiteLive() {
				uni.navigateTo({
					url: '/pagesYSM/ysmDesignerShop/siteLive'
				});
			},
			handleClickVideo(index) {
				console.log('this.dataSource', this.dataSource);
				this.dataSource.forEach(item => {
					this.$set(item, 'isAutoPlay', false)
				})

				this.dataSource[index].isAutoPlay = !this.dataSource[index].isAutoPlay;
				this.$set(this.dataSource, index, this.dataSource[index])
				//调用接口增加浏览量 addUserBroadcastViewNum
				this.$api.get({
					url: "/wanlshop/user/addUserBroadcastViewNum",
					data: {
						id: this.dataSource[index].id
					},
					success: (res) => {
						//不用处理
					},
				});
			},
		}
	};
</script>
<style lang='less' scoped>
	.component {
		width: 100%;
		height: 100%;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 90rpx;

			.label {
				font-size: 32rpx;
				color: #333;
				/* font-weight: 600; */
				font-size: 15px;
				line-height: 18px;
			}

			.more {
				font-size: 28rpx;
				color: #999;
			}
		}

		.content {
			padding: 0 32rpx 30rpx;

			.video-item {
				position: relative;
				margin-bottom: 20rpx;

				.watch {
					height: 38rpx;
					position: absolute;
					top: 10rpx;
					left: 30rpx;
					z-index: 1;

					font-weight: 400;
					font-size: 26rpx;
					line-height: 36rpx;
					color: #FFFFFF;

					.image-w {
						display: inline-block;
						width: 38rpx;
						height: 38rpx;
						margin-right: 10rpx;
						vertical-align: middle;
					}

					image {
						width: 100%;
						height: 100%;
						// margin-right: 10rpx;
						z-index: 9999;
					}
				}

			}

			.poster {
				width: 100%;
				height: 370rpx;
				margin-bottom: 32rpx;
				position: relative;

				video,
				image {
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}


				.play-bg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 88rpx;
					height: 88rpx;
				}

				.play-triangle {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 28rpx;
					height: 28rpx;
				}
			}

			.desc {
				padding: 20rpx 0 0 0;

				.desc-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.desc-info {
					font-weight: 400;
					font-size: 24rpx;
					line-height: 30px;
					color: #808080;
				}
			}
		}
	}
	
	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #808080;
		/* padding-left: 40rpx;
		padding-right: 42rpx; */
		margin-bottom: 32rpx;
	
		.right {
			display: flex;
			align-content: center;
	
			.address {
				padding-right: 18rpx;
			}
	
			.image-wrap {
				width: 18rpx;
				height: 22rpx;
	
				// margin-right: 24rpx;
				.rotate-image {
					transform: rotate(-90deg);
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.basic-wrap {
	
		.showInfo-enter-active,
		.showInfo-leave-active {
			transition: all 0.5s;
		}
	
		.showInfo-enter,
		.showInfo-leave-to {
			max-height: 0;
			opacity: 0;
			overflow: hidden;
		}
	
		.basic-info-top {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
	
			/deep/ .image-wrap {
				image {
					width: 100%;
					height: 100%;
				}
	
				.designer-avatar {
					width: 125rpx;
					height: 125rpx;
	
					.designer_level {
						height: 40rpx;
					}
				}
			}
	
			.name {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
				margin-left: 24rpx;
				margin-right: 24rpx;
			}
	
			.sub-title {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #808080;
			}
		}
	
		.basic-info-con {
			display: flex;
			flex-direction: column;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #808080;
	
			.title {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
				/* margin-bottom: 32rpx; */
				padding: 0!important;
				height: 44rpx!important;
			}
	
			.item {
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 56rpx;
				color: #808080;
	
				view {
					flex: 1;
				}
			}
		}
	}
</style>